<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<table>
	<tr>
		<td>姓名:</td>
		<td><input type="text" onblur="n1()" id="name"></td>
		<td><div id='err1' font-color='red'></div></td>
	</tr>
	<tr>
		<td>用户名:</td>
		<td><input type="text" onblur="n2()" id="username"></td>
		<td><div id='err2' font-color='red'></div></td>
	</tr>
	<tr>
		<td>密码:</td>
		<td><input type="password" onblur="n3()" id='password1'></td>
		<td><div id='err3' font-color='red'></div></td>
	</tr>
	<tr>
		<td>再次输入密码:</td>
		<td><input type="password" onblur="n4()" id="password2"></td>
		<td><div id='err4' font-color='red'></div></td>
	</tr>
	<tr>
		<td>电子邮箱:</td>
		<td><input type="text" onblur="n5()" id='email'></td>
		<td><div id='err5' color='red'></div></td>
	</tr>
	<tr>
		<td>性别:</td>
		<td>
			<input type="radio" name="gender" id="male" value='男' onblur="" checked>男
			<input type="radio" name="gender" id="female" value='女' onblur="">女
		</td>
	</tr>
</table>
</body>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	var n1=function (){
		var reg1=/^\w{3,12}$/;
		if(reg1.test($('name').value)==true){
			$('err1').innerText='';
		}else{
			$('err1').innerText='用户名为3-12为字母';
		}
	}
	var n2=function (){
		var reg2=/^[a-zA-Z0-9_]{4,16}$/;
		if(reg2.test($('username').value)==true){
			$('err2').innerText='';
		}else{
			$('err2').innerText='用户名为4-16位数字字母下划线';
		}
	}
	var n3=function (){
		var reg3=/^[a-zA-Z0-9]{6,18}$/;
		if(reg3.test($('password1').value)==true){
			$('err3').innerText='';
		}else{
			$('err3').innerText='密码为6-18位数字，字母';
		}
	}
	var n4=function (){
		var reg4=/^[a-zA-Z0-9]{6,18}$/;
		if($('password2').value==$('password1').value){
			$('err4').innerText='';
		}else{
			$('err4').innerText='两次输入不一致';
		}
	}
	var n5=function (){
		var reg5=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
		//获取id的值，为true显示空白，为false显示红字提示
		if(reg5.test($('email').value)==true){
			$('err5').innerText='';
		}else{
			$('err5').innerText='不能为空,且包含@和.';
		}
	}
</script>
</html>